<template>
  <el-drawer v-model="drawer" title="I am the title" :with-header="false" size="50%">
    <!-- <div ref="chartDom" style="width: 600px; height: 400px"></div> -->
    <v-chart autoresize class="chart" :option="option" @click="handlerClick" />
  </el-drawer>
</template>
  <script setup>
import { nextTick, onMounted, ref, watch } from 'vue'
import * as echarts from 'echarts'

import { use } from 'echarts/core'
import { CanvasRenderer } from 'echarts/renderers'
import { PieChart } from 'echarts/charts'
import { TitleComponent, TooltipComponent, LegendComponent } from 'echarts/components'
// let chartDom = ref(null) //注意变量名 和 ref名字要对应
// onMounted(() => {
//   nextTick(() => {
//     initChart()
//   }, 500)
// })

use([CanvasRenderer, PieChart, TitleComponent, TooltipComponent, LegendComponent])

const drawer = ref(false)

const month = ref([])
const data = ref([])

const open = (item1, item2) => {
  drawer.value = true
  month.value = item1
  data.value = item2
}

watch(
  [month, data],
  ([newYears, newData], [oldYears, oldData]) => {
    console.log('月份执行了')
    console.log('老数据', oldYears, oldData)
    console.log('新数据', newYears, newData)

    // 检查数组长度是否相等（仅作为安全检查）
    if (newYears.length === newData.length) {
      option.value.xAxis.data = newYears
      option.value.series[0].data = newData
      // 如果需要的话，您可以在这里触发图表的resize或其他更新逻辑
    }
  },
  { deep: true }
)

// const initChart = () => {
//   if (!chartDom.value) {
//     return
//   }
//   var myChart = echarts.init(chartDom.value)
//   var option = {
//     tooltip: {
//       // 鼠标悬浮提示数据
//       trigger: 'axis',
//       backgroundColor: 'rgba(32, 33, 36,.7)',
//       borderColor: 'rgba(32, 33, 36,0.20)',
//       borderWidth: 15,
//       textStyle: {
//         // 文字提示样式
//         color: '#fff',
//         fontSize: '12'
//       },
//       axisPointer: {
//         // 坐标轴虚线
//         type: 'cross',
//         label: {
//           backgroundColor: '#6a7985'
//         }
//       }
//     },
//     grid: {
//       // 控制图表的位置
//       left: '5%',
//       right: '5%',
//       top: '18%',
//       bottom: '5%',
//       containLabel: true
//     },
//     xAxis: {
//       axisLabel: {
//         // X轴线 标签修改
//         textStyle: {
//           color: 'white', //坐标值得具体的颜色
//           fontSize: '10'
//         }
//       },
//       data: ['A', 'B', 'C', 'D', 'E', 'F']
//     },
//     yAxis: {
//       axisLabel: {
//         // y轴线 标签修改
//         textStyle: {
//           color: 'white' //坐标值得具体的颜色
//         }
//       }
//     },
//     series: [
//       {
//         data: [2549, 12421, 2637, 3146, 15189, 9562],
//         type: 'bar',
//         barWidth: '48%', //调整柱状图宽度
//         itemStyle: {
//           normal: {
//             /*--------设置柱形图圆角 [左上角，右上角，右下角，左下角]-------------*/
//             borderRadius: [12, 12, 0, 0],
//             /*--------设置柱形图渐变色 -------------*/
//             color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
//               {
//                 offset: 0,
//                 color: 'rgba(0,244,255,1)'
//               },
//               {
//                 offset: 1,
//                 color: 'rgba(0,77,167,1)'
//               }
//             ])
//           }
//         }
//       }
//     ]
//   }
//   option && myChart.setOption(option)
// }

const option = ref({
  title: {
    text: '月份发布统计',
    left: 'center'
  },
  tooltip: {
    // 鼠标悬浮提示数据
    trigger: 'axis',
    backgroundColor: 'rgba(32, 33, 36,.7)',
    borderColor: 'rgba(32, 33, 36,0.20)',
    borderWidth: 15,
    textStyle: {
      // 文字提示样式
      color: '#fff',
      fontSize: '12'
    },
    axisPointer: {
      // 坐标轴虚线
      type: 'cross',
      label: {
        backgroundColor: '#6a7985'
      }
    }
  },
  grid: {
    // 控制图表的位置
    left: '5%',
    right: '5%',
    top: '18%',
    bottom: '5%',
    containLabel: true
  },
  xAxis: {
    axisLabel: {
      // X轴线 标签修改
      textStyle: {
        color: 'white', //坐标值得具体的颜色
        fontSize: '10'
      }
    },
    data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月']
  },
  yAxis: {
    axisLabel: {
      // y轴线 标签修改
      textStyle: {
        color: 'white' //坐标值得具体的颜色
      }
    }
  },
  series: [
    {
      data: [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
      type: 'bar',
      barWidth: '48%', //调整柱状图宽度
      itemStyle: {
        normal: {
          /*--------设置柱形图圆角 [左上角，右上角，右下角，左下角]-------------*/
          borderRadius: [12, 12, 0, 0],
          /*--------设置柱形图渐变色 -------------*/
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            {
              offset: 0,
              color: 'rgba(0,244,255,1)'
            },
            {
              offset: 1,
              color: 'rgba(0,77,167,1)'
            }
          ])
        }
      }
    }
  ]
})

defineExpose({
  open
})
</script>
   
  <style scoped>
.box {
  width: 24vw;
  height: 60vh;
  background-color: #031a67;
}
</style>